---
// import BaseHead from '../../components/BaseHead.astro';
// import Header from '../../components/Header.astro';
// import Footer from '../../components/Footer.astro';
// import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
import { getCollection } from "astro:content"
import BaseLayout from "@layouts/Layout.astro"
const title = "Api"
const description =
  "Astro-Ink is a crisp, minimal, personal blog theme for Astro"

const posts = (await getCollection("blog")).sort(
  (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
)
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> -->
    <style>
      ul {
        list-style-type: none;
        padding: unset;
      }
      ul li {
        display: flex;
      }
      ul li time {
        flex: 0 0 130px;
        font-style: italic;
        color: #595959;
      }
      ul li a:visited {
        color: #8e32dc;
      }
    </style>
  </head>
  <body>
    <!-- <Header /> -->
    <BaseLayout content={{ title, description }}>
      <main>
        <section>
          <ul>
            {
              posts.map((post) => (
                <li>
                  <time datetime={post.data.pubDate.toISOString()}>
                    {post.data.pubDate.toLocaleDateString("en-us", {
                      year: "numeric",
                      month: "short",
                      day: "numeric",
                    })}
                  </time>
                  <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
                </li>
              ))
            }
          </ul>
        </section>
      </main>
    </BaseLayout>
    <!-- <Footer /> -->
  </body>
</html>
